{% extends "base_frontoffice.html" %}

{% block content %}



<div class="container mt-4">
    <div class="d-flex justify-content-between align-items-center">
        <h4>Livraison fournisseur</h4>
    </div>
<div class="row">
    <div class="col-sm-12 col-md-8 col-lg-8 text-white">
    <div class="d-flex justify-content-between align-items-center">
    <input type="text " id="tableSearch" class="form-control  w-50" >
    <a class="btn btn-primary" href="/panier/fournisseur">NOUVEAU</a>
    
    </div>
    <div class="table-responsive mt-4">
        <table class="table table-sm align-items-center justify-content-center mb-0" id="commandeTable">
            <thead class="table-light">
                <tr>
                    <th>Fournisseur</th>
                    <th>Réf</th>
                    <th>Date</th>
                    <th>Montant</th>
                    <th>Status</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                {% for livraison in all_livraison %}
                <tr data-id="{{livraison.id}}">
                    <td>{{ livraison.fournisseur.nom }}</td>
                    <td>{{ livraison.ref }}</td>
                    <td>{{ livraison.date_str }}</td>
                    <td class="money">{{ livraison.net_payer }}</td>
                    <td>{{ livraison.status }}</td>
                    <td><span class="d-flex">
                        <button class="btn btn-secondary btn-sm" data-bs-toggle="modal" data-bs-target="#detailModal" onclick="show_detail('{{livraison.id}}')">Detail</button>
                        {% if not livraison.status=="REGLEE" %}
                        <button class="btn btn-warning btn-sm mx-1" data-bs-toggle="modal" data-bs-target="#reglerModal" onclick="reglement('{{livraison.id}}')">Régler</button>
                        {% endif %}
                    </span>
                    </td>
                </tr>
              
                {% endfor %}
            </tbody>
        </table>
    </div>
    </div>
    </div>
</div>
<!-- Modal Form -->
<div class="modal fade" id="detailModal" tabindex="-1" aria-labelledby="cancelLabel" >
  <div class="modal-dialog modal-md">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="cancelLabel">DETAIL LIVRAISON</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
      </div>

      <div class="modal-body" >
        <div class="input-group mb-1">
            <span class="input-group-text bg-secondary text-white" >DATE COMMANDE</span>
            <input type="date"  class="form-control px-2"  id="detail_date"  disabled />
        </div>
        <div class="input-group mb-1">
            <span class="input-group-text bg-secondary text-white" >REF</span>
            <input type="text"  class="form-control px-2"  id="ref"  disabled />
        </div>
        
        
        <div class="table-responsive mt-1">
        <table class="table table-sm align-items-center justify-content-center mb-0">
            <thead class="table-light">
                <tr>
                    <th>Ref</th>
                    <th>P Achat</th>
                    <th>Qté</th>
                    <th>Montant</th>
                </tr>
            </thead>
            <tbody id="body_detail">
             </tbody>
        </table> 
        </div>
        <ul class="list-group mb-3" id="cart-items">
            <li class="list-group-item d-flex justify-content-between">
              <span >MONTANT LIVRAISON</span>
              <strong id="montant">0</strong>
            </li>
            <li class="list-group-item d-flex justify-content-between">
              <span >MONTANT FACTURE</span>
              <strong id="net_payer">0</strong>
            </li>
        </ul>
        <hr>
        <h5 class="modal-title" >REGLEMENT</h5>
        <ul class="list-group mb-3" id="reg_item">
            
        </ul>
       
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">FERMER</button>
      </div>
    </div>
  </div>
</div>
</div>

<div class="modal fade" id="reglerModal" tabindex="-1" aria-labelledby="cancelLabel" >
  <div class="modal-dialog modal-md">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="cancelLabel">REGLEMENT LIVRAISON</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
      </div>
      <form method="POST" action="#" id='regForm'>
      <div class="modal-body" >
        <div class="input-group mb-1">
            <span class="input-group-text bg-secondary text-white" >DATE REGLEMENT</span>
            <input type="date"  class="form-control px-2" name="date" required />
        </div>
        <div class="input-group mb-1">
            <span class="input-group-text bg-secondary text-white" >MONTANT</span>
            <input type="number" min="0" step='0.01' id="moneyInput" class="form-control px-2" name="montant" required />
        </div>
        <div id="moneyInWords" class="form-text mt-2"></div>
        <div class="input-group mb-1">
            <span class="input-group-text bg-secondary text-white" >MODE DE PAIEMENT</span>
            <input type="text"  class="form-control px-2" name="mode"  required/>
        </div>
        <div class="input-group mb-1">
          <span class="input-group-text bg-secondary text-light" id="basic-addon1">CAISSE</span>
              <select class="form-control "  name="caisse">
                {% for caisse in all_caisse %}
                  <option value="{{caisse.id}}">{{caisse.name}}</option>
                {% endfor %}
              </select>
          </div>
        <div class="input-group mb-1">
            <span class="input-group-text bg-secondary text-white" >REF</span>
            <input type="text" class="form-control px-2" name="ref" required />
        </div>
        
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">FERMER</button>
        <button type="submit" class="btn btn-danger">ENREGISTRER</button>
      </div>
    </div>
    </form>
  </div>
</div>
</div>
<script src="../static/js/chiffre2lettre.js"></script>
<script>
  const moneyInput = document.getElementById('moneyInput');
  const moneyInWords = document.getElementById('moneyInWords');

  moneyInput.addEventListener('input', () => {
    moneyInput.value = moneyInput.value.replace(/[^0-9+ ]/g, ''); 
    const value = parseInt(moneyInput.value);
    if (!isNaN(value) && value <= 1000000000) {
      moneyInWords.textContent = NumberToLetter(value) + ' Ariary';
    } else {
      moneyInWords.textContent = '';
    }
  });

document.getElementById("tableSearch").addEventListener("keyup", function () {
  const input = this.value.toLowerCase();
  const rows = document.querySelectorAll("#commandeTable tbody tr");

  rows.forEach(row => {
    const rowText = row.innerText.toLowerCase();
    row.style.display = rowText.includes(input) ? "" : "none";
  });
});
</script>
<script>
  window.onload=function(){
    var all_number =$(".money");
    for (let number of all_number){

      number.textContent=parseFloat(number.textContent).toLocaleString("fr-FR", {minimumFractionDigits:2});
    };

};

function reglement(id){
    let regForm=document.getElementById("regForm");
    regForm.action='/reglement/livraison?id='+id;
}

function show_detail(id) {
    let detail_date=document.getElementById("detail_date");
    detail_date.value="";
    let ref=document.getElementById("ref");
    ref.value="";
    let body_detail=document.getElementById("body_detail");
    body_detail.innerHTML="";
    let montant=document.getElementById("montant");
    montant.textContent="0";
    let net_payer=document.getElementById("net_payer");
    net_payer.textContent="0";

    let reg_item=document.getElementById('reg_item');
    reg_item.innerHTML="";

    fetch("/json/livraison?id="+id, {
      method: "GET",
    })
    .then(res => res.json())
    .then(data => {

      ref.value=data["ref"];
      detail_date.value=data["date"];
      montant.textContent=parseFloat(data["montant"]).toLocaleString("fr-FR",{minimumFractionDigits:2});
      net_payer.textContent=parseFloat(data["net_payer"]).toLocaleString("fr-FR",{minimumFractionDigits:2});
      for(let detail of data["detail"]){

          let tr_row=document.createElement("tr");
          let ref_td=document.createElement("td");
          ref_td.textContent=detail["article_code"];

          let prix_td=document.createElement("td");
          prix_td.textContent=parseFloat(detail["pu"]).toLocaleString("fr-FR", {minimumFractionDigits:2});
          let qty_td=document.createElement("td");
          qty_td.textContent=detail["quantite"];
          let montant_td=document.createElement("td");
          montant_td.textContent=parseFloat(detail["sous_total"]).toLocaleString("fr-FR", {minimumFractionDigits:2});
          tr_row.appendChild(ref_td);
 
          tr_row.appendChild(prix_td);
          tr_row.appendChild(qty_td);
          
          tr_row.appendChild(montant_td);
          body_detail.appendChild(tr_row);
      }
     for(let reg of data["reglement"]){

        let li=document.createElement("li");
        li.classList="list-group-item d-flex justify-content-between";
        let span=document.createElement("span");
        span.textContent=reg["date"]+" ("+reg["mode"]+")";
        li.appendChild(span);
        let strong=document.createElement("strong");
        strong.textContent=parseFloat(reg["montant_paye"]).toLocaleString("fr-FR", {minimumFractionDigits:2});
        li.appendChild(strong);
        reg_item.appendChild(li);

     }

      


    })
    .catch(err => {
      console.error(" failed:", err);
      
    });
}
</script>
{% endblock %}